<template>
  <div class="content">
    <div class="price-config-container">
      <el-card header="价格配置">
        <el-form ref="formRef" :model="form" label-width="120px">
          <el-form-item label="每小时价格" prop="price1">
            <el-input-number v-model="form.price1" :min="0" controls-position="right">
              <template #prefix>
                <span>￥</span>
              </template>
            </el-input-number>
            <span data-v-cffab988="" class="tip-text">（最低收费按半小时计算）</span>
          </el-form-item>
          <el-form-item label="用户预付款" prop="price2">
            <el-input-number v-model="form.price2" :min="0" controls-position="right">
              <template #prefix>
                <span>￥</span>
              </template>
            </el-input-number>
            <span data-v-cffab988="" class="tip-text">（还车结算时退回剩下金额）</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" :loading="loading">保存配置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getPrice, savePrice } from "@/api/babycar";
const loading = ref(false);
const form = reactive({
  price1: 0,
  price2: 0,
});
const onSubmit = async () => {
  loading.value = true;
  await savePrice({
    package_id: 1,
    price: form.price1,
  }).then((res: any) => {});
  await savePrice({
    package_id: 2,
    price: form.price2,
  }).then((res: any) => {});
  ElMessage.success("保存配置成功");
  loading.value = false;
};
onMounted(() => {
  getPrice().then((res: any) => {
    if (res.code == 1) {
      res.data.forEach((item: any) => {
        if (item.package_id == 1) {
          form.price1 = parseFloat(item.price);
        } else if (item.package_id == 2) {
          form.price2 = parseFloat(item.price);
        }
      });
    }
  });
});
</script>

<style lang="scss">
.price-config-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  .tip-text {
    margin-left: 12px;
    color: #999;
    font-size: 12px;
  }
}
</style>
